import styles from './index.module.scss';
import {Button, Form, Input, NavBar, Toast} from "antd-mobile";
import {useDispatch} from "react-redux";
import {fetchCode, fetchLogin} from "@/store/actions/login";
import {useHistory} from "react-router-dom";
import {useEffect, useRef, useState} from "react";

const {useForm} = Form


const Login = (props) => {
  // state-hooks
  const [timeLeft, setTimeLeft] = useState(0);


  // 其他hooks
  const dispatch = useDispatch()
  const [form] = useForm()
  const mobileRef = useRef(null)
  // console.log(form)
  // 路由里面的history
  const history = useHistory()
  const onFinish = async values => {
    try {
      //  调用登录接口
      // 登录成功之后弹层提示
      await dispatch(fetchLogin(values))
      Toast.show({
        content: '登录成功',
        duration: 1000,
      })
      history.replace('/home')
    } catch (e) {
      Toast.show({
        content: e?.response?.data?.message || '登录失败，请重新再试',
        duration: 1000
      })
    }

  }

  // 登录逻辑
  // 登录接口的时候把返回的token存储起来
  // 1、redux ==> 项目里面获取的时候使用
  // 2、本地存储 ==> 持久化
  // 3、接口请求redux action dispatch
  // 4、thunk完成登录的副作用
  // 5、请求登录接口，获取到的内容派发真正的reducer，更新store

  useEffect(() => {
    console.log(timeLeft)
    const newTimer = setTimeout(() => {
      if (timeLeft > 0) {
        // 如果time大于0的时候，再去设置值
        setTimeLeft(c => c - 1)
      }
    }, 1000)
    return () => {
      clearTimeout(newTimer)
    };
  }, [timeLeft]);


  const getCode = () => {
    // 动态获取表单里面用户填充的手机号
    const mobile = form.getFieldValue('mobile') || '' // name 表单的name值
    // 如何检查当前表单校验通过
    const hasError = form.getFieldError('mobile').length > 0
    if (mobile.trim() === '' || hasError) {
      // 如果校验出错了
      // 手机号自动获取焦点即可
      mobileRef.current.focus()
      return
    }
    setTimeLeft(5)
    dispatch(fetchCode(mobile))
  }

  return (
    <div className={styles.root}>
      <NavBar/>
      <div className={'login-form'}>
        <h2 className={'title'}>账号登录</h2>

        {/*  核心表单*/}
        {/*失去焦点的时候校验表单*/}
        <Form
          onFinish={onFinish}
          validateTrigger={['onBlur', 'onChange']} // 统一设置表单校验的触发时机
          form={form}
        >
          <Form.Item
            className={'login-item'}
            name={'mobile'}
            rules={[
              {
                required: true,
                message: '手机号不能为空'
              },
              {
                pattern: /^1\d{10}$/,
                message: '手机号格式错误'
              }
            ]}
          >
            <Input ref={mobileRef} placeholder={'请输入手机号'}/>
          </Form.Item>

          <Form.Item
            className={'login-item'}
            extra={<Button
              onClick={getCode}
              color={'primary'}
              size={'mini'}
              disabled={timeLeft !== 0}
            >
              {timeLeft === 0 ? '发送验证码' : `${timeLeft}后重新发送`}
            </Button>}
            name={'code'}
            rules={[
              {
                required: true,
                message: '验证码不能为空'
              }
            ]}
          >
            <Input placeholder={'请输入验证码'}/>
          </Form.Item>

          {/*noStyle 不使用formItem的默认样式*/}
          {/*shouldUpdate ==> 表单的任意变化都会触发该区域的更新*/}
          <Form.Item noStyle shouldUpdate>
            {
              () => {
                // 实时判断表单校验是否通过
                // 实时判断用户是否操作过该表单
                // 校验通过+用户操作过该表单 ==> 允许登录
                // disadlbe的值


                // 含义：是否没有操作过表单
                const untouched = !form.isFieldsTouched(true) // 校验所有表单是否都被用户操作过 every
                // console.log(untouched)
                const hasError = form.getFieldsError().some(item => item.errors.length)
                // 只要数组的任何一项满足了某个条件，说明表单出错了
                // 某个条件：errros数组length > 0
                // true ==> 表单出错
                // false ==> 校验通过

                // 接受的是一个数组形式
                // 数组的每一项对应的一行表单
                // 每一项里面有errors属性 ==> 数组
                // 只要任何一项的errros数组length > 0 说明表单校验出错
                // console.log(hasError)

                const disabled = untouched || hasError
                return <Button
                  block
                  disabled={disabled}
                  type={'submit'}
                  color={'primary'}
                  className={'login-submit'}
                >
                  登录
                </Button>
              }
            }
          </Form.Item>
        </Form>
      </div>
    </div>
  )
};

export default Login

// 点击发送验证码按钮的时候，发送请求
// 发送请求的时候展示loading效果
// 拿到结果之后
// 如果成功 开始倒计时
// 如果失败的，则不需要倒计时，进行错误 提示

// ahooks里面的useRequest useCountdown
